<template>
  <StepsContainerWrapper v-if="index === steps.current">
    <div class="icon" v-if="icon">
      <a-icon :type="icon" theme="filled"></a-icon>
    </div>
    <div class="title" v-if="title">{{title}}</div>
    <div class="sub-title" v-if="subtitle">{{subtitle}}</div>
    <slot></slot>
  </StepsContainerWrapper>
</template>

<script>
import { StepsContainerWrapper } from './style'

export default {
  name: 'step-item',
  components: {
    StepsContainerWrapper,
  },
  inject: ['steps'],
  props: {
    name: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    wait: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      index: -1,
    }
  },
  mounted () {
    this.index = this.steps.steps.length
    this.steps.addItem({
      name: this.name,
      disabled: this.disabled,
      wait: this.wait,
    })
  },
}
</script>
